<template>
  <div>
    <!-- 搜索框 -->
    <van-search class="search" disabled placeholder="请输入小区或地址" to="/City">
      <template #label>
        <div @click="city">深圳▾</div>
      </template>
    </van-search>
    <van-icon name="chat-o" class="icon" size />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swiperList" :key="item.id">
        <img :src="'https://api-haoke-web.itheima.net'+item.imgSrc" />
      </van-swipe-item>
    </van-swipe>
    <!-- 合租 -->
    <van-grid :border="false" :column-num="4" class="homeimg">
      <van-grid-item>
        <img src="../../assets/1.png" alt />
        <h2>整租</h2>
      </van-grid-item>
      <van-grid-item>
        <img src="../../assets/2.png" alt />
        <h2>合租</h2>
      </van-grid-item>
      <van-grid-item>
        <img src="../../assets/3.png" alt />
        <h2>地图找房</h2>
      </van-grid-item>
      <van-grid-item>
        <img src="../../assets/4.png" alt />
        <h2>去出租</h2>
      </van-grid-item>
    </van-grid>
    <!-- 租房小组 -->
    <div class="group">
      <h3>
        租房小组
        <span>更多</span>
      </h3>
      <van-grid gutter="10" :border="false" :column-num="2" class="homeimg" direction="horizontal">
        <van-grid-item>
          <img src="../../assets/1.png" alt />
          <h2>整租</h2>
        </van-grid-item>
        <van-grid-item>
          <img src="../../assets/2.png" alt />
          <h2>合租</h2>
        </van-grid-item>
        <van-grid-item>
          <img src="../../assets/3.png" alt />
          <h2>地图找房</h2>
        </van-grid-item>
        <van-grid-item>
          <img src="../../assets/4.png" alt />
          <h2>去出租</h2>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { swiper } from '@/api/index.js'
export default {
  data () {
    return {
      swiperList: []
    }
  },
  methods: {
    city () {
      this.$router.push('/city')
    }
  },
  async created () {
    try {
      const res = await swiper()
      this.swiperList = res.data.body
      console.log(res)
      return console.log(Promise.resolve(res))
    } catch (res) {
      return Promise.reject(res)
    }
  }
}
</script>

<style>
body {
  background-color: #f6f5f6;
}
.icon {
  color: #fff;
  position: fixed;
  z-index: 100;
  top: 30px;
  right: 10px;
}
.search {
  width: 310px;
  height: 34px;
  position: fixed;
  top: 25px;
  right: 45px;
  z-index: 1;
  border-radius: 2px;
}
.my-swipe .van-swipe-item {
  width: 375px;
  height: 212px;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  z-index: -1;
}
.my-swipe img {
  width: 100%;
}
.homeimg h2 {
  font-size: 14px;
  font-weight: 400;
  margin: 12px 0;
}
.homeimg img {
  width: 60px;
  height: 60px;
}
.group {
  margin: 0 10px;
}
.group h3 {
  display: flex;
  justify-content: space-between;
  display: flex;
  font-size: 14px;
}
.group h3 span {
  font-weight: 400;
}
</style>
